Page history of 스타트업을 위한 웹 개발 기초/교재

개요

예제와 같은 미니 쇼핑몰을 개발해본다. Django Admin을 통해서 쇼핑몰 컨텐츠를 등록하면, 웹페이지에서 컨텐츠를 전시하고, 사용자가 구매하고, 댓글을 달 수 있게 한다.

기능 목록

• 회원가입 / 로그인
• 상품 목록 보기
• 상품 상세 내역 보기
• 구매하기
• 구매내역 보기
• 댓글

학습하게 되는 기술

• HTML / CSS 기초
• Python 기초
• Django 사용법
• Bootstrap 활용
• 버전 관리

1단계 : 개발환경 준비에서 Hello World까지

개발 보조도구 설치

• Sublime Text
• Firefox
• Homebrew
• GitX

파이썬 & Django

sudo easy_install pip
sudo pip install ipython readline
sudo pip install django

작업할 디렉토리

mkdir workspace
cd workspce

Django로 웹사이트 개발

django-admin.py startproject minishop
cd minishop
chmod +x manage.py
./manage.py startapp shopping
./manage.py runserver

http://localhost:8000 접속

Hello World 텍스트로 응답하기

urls.py

urlpatterns = patterns('',
    url(r'^
views.py
def index(request):
    return HttpResponse('Hello World')


 HTML 기초

	
h1~h6
	
a
	
p
	
div
	
table
	
ul, ol, li

 CSS 기초

	
font, color
	
inline/block element
	
content flows, float
	
box model
	
css file, style tag
	
Bootstrap

 The Fancy UI 따라하기

	
navbar
	
상품 사진
	
상품 이름
	
grid 배열

 상품 실제 데이터로 입력

	
sqlite3
	
model 설계
	
django shell에서 갖고 놀기
	
파이썬 기초 문법
	
django admin에서 데이터 입력 

 상품 상세화면

	
링크 누르면 상세화면으로 이동
	
상품 사진, 이름, 설명
	
구매 버튼

 로그인

	
로그인이 필요한 기능 처리
	
로그인 페이지
	
가입
	
로그아웃

 구매

	
구매 처리
	
구매 목록 보여주기

 댓글

	
댓글 입력 UI
	
댓글 저장
	
댓글 보여주기

 Deployment
 Heroku






 , 'shopping.views.index'),
)

views.py

HTML 기초

• h1~h6
• a
• p
• div
• table
• ul, ol, li

CSS 기초

• font, color
• inline/block element
• content flows, float
• box model
• css file, style tag
• Bootstrap

The Fancy UI 따라하기

• navbar
• 상품 사진
• 상품 이름
• grid 배열

상품 실제 데이터로 입력

• sqlite3
• model 설계
• django shell에서 갖고 놀기
• 파이썬 기초 문법
• django admin에서 데이터 입력

상품 상세화면

• 링크 누르면 상세화면으로 이동
• 상품 사진, 이름, 설명
• 구매 버튼

로그인

• 로그인이 필요한 기능 처리
• 로그인 페이지
• 가입
• 로그아웃

구매

• 구매 처리
• 구매 목록 보여주기

댓글

• 댓글 입력 UI
• 댓글 저장
• 댓글 보여주기

Deployment

Heroku